<template>
  <el-container id="app">
    <!-- 标题栏 -->
    <el-header height="30px">
      <el-row>

        <el-col :span="3" :offset="1" v-if="nickname == null">
          <router-link to="/Login" style="color: red;">亲，请登录</router-link>
        </el-col>

        <el-col :span="3" :offset="1" v-if="nickname != null">
          <span style="coLor: red;">欢迎您 , {{nickname}} ! </span>
        </el-col>

        <el-col :span="2" v-if="nickname == null">
          <router-link to="/Register">免费注册</router-link>
        </el-col>

        <el-col :span="2">
        <el-dropdown>
          <span class="el-dropdown-link">
            个人中心<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <router-link to="/User">
                个人信息
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/ChangePassword">
                修改密码
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="nickname != null">
              <span @click="logout">
                注　　销
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </el-col>

        <el-col :span="2" :offset="11">
          <router-link to="/">我的订单</router-link>
        </el-col>

        <el-col :span="2">
          <el-dropdown>
            <span class="el-dropdown-link">
              我的蜗牛<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/ProductView">
                  我要拍卖
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/">
                  待处理订单
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/">
                  帮助中心
                </router-link>
              </el-dropdown-item>


            </el-dropdown-menu>
          </el-dropdown>
        </el-col>




      </el-row>
    </el-header>
    <el-main>
      <!-- 顶部导航 -->
      <el-menu mode="horizontal" :unique-opened="true" style="margin-top:-20px;" :default-active="this.$router.path"
        router>

        <el-menu-item style="font-size:18px;" index="/">首页</el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <span style="font-size:18px;">全球拍</span>
          </template>
          <el-menu-item style="font-size:16px;" index="/AuctionList">全部竞拍</el-menu-item>
          <el-menu-item style="font-size:16px;" index="/">今日上新</el-menu-item>

        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <span style="font-size:18px;">我的拍卖</span>
          </template>
          <el-menu-item style="font-size:16px;" index="/MyAuctions">我的竞拍</el-menu-item>
          <el-menu-item style="font-size:16px;" index="/MyParticipated">我参加的</el-menu-item>
          <el-menu-item style="font-size:16px;" index="/">我的获拍</el-menu-item>
          <el-menu-item style="font-size:16px;" index="/">我的保证金</el-menu-item>
        </el-submenu>
      </el-menu>
      <div style="margin-bottom: 20px;" class="title"><i class="el-icon-trophy"></i> 蜗 牛 · 竞 拍</div>
      <!-- 工作区 -->
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: 'App'
    ,
    data() {
      return {
        account: this.$cookies.get('account'),
        nickname: this.$cookies.get('nickname')
      }
    }
    ,
    methods:{
      logout(){
        this.$cookies.remove('token')
        this.$cookies.remove('account')
        this.$cookies.remove('nickname')
        location.href='/'
      }
    }
    ,
    created() {

    }
  }
</script>

<style>
  ::-webkit-scrollbar {
    display: none;
  }

  .el-header {
    background-color: #f5f5f5;
    color: #6c7ba1;
    font-size: 15px;
    line-height: 25px;
    border: 1px solid #f5f5f5;
    box-shadow: 1px 1px 1px 0px #f5f5f5;
  }

  .title{
      font-size: 40px;
      text-align: center;
    }
</style>
